<template>
	<view>
		<uni-popup ref="addDatabaseVisit" type="dialog">
			<uni-popup-dialog title="增加数据库" mode="input" message="成功消息" :duration="2000" :before-close="true"
				@close="closeAddDatabase()" @confirm="confirmAddDatabase()">
				<uni-forms :modelValue="addDatabaseInfo">
					<uni-forms-item label="数据库名" name="name">
						<uni-easyinput type="text" v-model="addDatabaseInfo.name" placeholder="请输入数据库名" />
					</uni-forms-item>
					<uni-forms-item label="字符集" name="charset">
						<uni-data-picker mode="list" v-model="addDatabaseInfo.charset" :localdata="charsets"
							popup-title="请选择字符集" @change="selectCharset" />
					</uni-forms-item>
					<uni-forms-item label="排序规则" name="collation">
						<uni-data-picker mode="list" v-model="addDatabaseInfo.collation" :localdata="collations"
							popup-title="请选择字符集" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="databaseOPVisit" type="bottom" background-color="#fff">
			<view style="height: 500rpx">
				<u-list>
					<u-list-item>
						<u-button size="large" class="option" text="编辑数据库" @click="openUpdateDatabase()">
						</u-button>
					</u-list-item>
					<u-list-item>
						<u-button size="large" class="option" text="删除数据库" @click="openDeleteDatabase()"></u-button>
					</u-list-item>
					<u-list-item>
						<u-button size="large" class="option" text="查看表" @click="toTableInfo()"></u-button>
					</u-list-item>
				</u-list>
			</view>
		</uni-popup>

		<uni-popup ref="updateDatabaseVisit" type="dialog">
			<uni-popup-dialog title="修改数据库" mode="input" message="成功消息" :duration="2000" :before-close="true"
				@close="closeUpdateDatabase" @confirm="confirmUpdateDatabase">
				<uni-forms :modelValue="updateDatabaseInfo">
					<uni-forms-item label="数据库名" name="name">
						<uni-easyinput type="text" v-model="updateDatabaseInfo.name" placeholder="请输入数据库名" />
					</uni-forms-item>
					<uni-forms-item label="字符集" name="charset">
						<uni-data-picker mode="list" v-model="updateDatabaseInfo.charset" :localdata="charsets"
							@change="selectCharset" popup-title="请选择字符集" />
					</uni-forms-item>
					<uni-forms-item label="排序规则" name="collation">
						<uni-data-picker mode="list" v-model="updateDatabaseInfo.collation" :localdata="collations"
							popup-title="请选择字符集" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="deleteDatabaseVisit" type="dialog">
			<uni-popup-dialog title="删除数据库" mode="base" message="成功消息" :duration="2000" :before-close="true"
				@close="closeDeleteDatabase()" @confirm="confirmDeleteDatabase()">
			</uni-popup-dialog>
		</uni-popup>

		<topbar :backgroundColor="backgroundColor" :navButtonColor="navButtonColor"></topbar>

		<uni-grid :column="2" :showBorder="false" :square="false">
			<connectioncard :name="name" :port="port" :ip="ip" :hasBorder="false" :hasNavigateTo="false" :imageUrl="cover">
			</connectioncard>

			<view>
				<u-button class="button" @click="openAddDatabase()">创建数据库</u-button>
				<u-button class="button" @click="doDelConnection()"> 删除数据库 </u-button>
			</view>
		</uni-grid>

		<view style="overflow-y: scroll">
			<u-list>
				<u-list-item v-for="(item, index) in databaseNames" :key="index">
					<u-cell :title="item.name" class="database-name-item" @click="openDatabaseOPVisit(index)">
						<u-icon slot="icon" name="coupon-fill" />
						<u-icon slot="right-icon" name="arrow-right" />
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import connectioncard from "@/components/connectioncard/connectioncard.vue";
	import tablestructure from "@/components/tablestructure/tablestructure.vue";
	import {
		uniPopup
	} from '@dcloudio/uni-ui'
	import {
		selectConnection,
		delConnection
	} from '@/api/database/index.js'
	import {
		selectDatabaseNames,
		selectAllCharset,
		selectAllCollation,
		addMysqlDatabase,
		delMysqlDatabase,
		updateMysqlDatabase
	} from '@/api/database/mysql/index.js'
	export default {
		components: {
			connectioncard,
			tablestructure,
			uniPopup
		},
		name: "connectionInfo",
		data() {
			return {
				id: 0,
				name: '',
				ip: '',
				port: '',
				cover: '',
				databaseNames: [],
				addDatabaseInfo: {
					name: "",
					collation: '',
					charset: ''
				},
				updateDatabaseInfo: {
					name: "",
					collation: '',
					charset: ''
				},
				charsets: [],
				collations: [],
				// 标记当前被点击的数据库
				currentDatabase: 0,
				backgroundColor: '',
				navButtonColor: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.name = option.name
			this.port = option.port
			this.ip = option.ip
			this.cover = option.cover
		},
		onReady() {
			this.doSelectConnection()
			this.backgroundColor = uni.getStorageSync('backgroundColor')
			this.navButtonColor = uni.getStorageSync('navButtonColor')
		},
		methods: {
			// 点击数据库选择操作
			openDatabaseOPVisit(index) {
				this.$refs.databaseOPVisit.open('bottom')
				this.currentDatabase = index
			},
			openAddDatabase() {
				this.$refs.addDatabaseVisit.open()
				this.addDatabaseInfo = {
					name: "",
					collation: 0,
					charset: 0
				}
				this.loadCharsets()
			},
			confirmAddDatabase() {
				this.databaseNames.push({
					name: this.addDatabaseInfo.name
				})
				this.$refs.addDatabaseVisit.close()
				this.doAddMysqlDatabase()
			},
			closeAddDatabase() {
				this.$refs.addDatabaseVisit.close()
			},
			openUpdateDatabase() {
				this.$refs.updateDatabaseVisit.open()
				this.updateDatabaseInfo = this.databaseNames[this.currentDatabase]
				this.loadCharsets()
			},
			confirmUpdateDatabase() {
				this.databaseNames[this.currentDatabase].name = this.updateDatabaseInfo.name
				this.$refs.updateDatabaseVisit.close()
				this.doUpdateMysqlDatabase()
			},
			closeUpdateDatabase() {
				this.$refs.updateDatabaseVisit.close()
			},
			openDeleteDatabase() {
				this.$refs.deleteDatabaseVisit.open()
			},
			confirmDeleteDatabase() {
				this.$refs.databaseOPVisit.close()
				this.$refs.deleteDatabaseVisit.close()
				this.doDelMysqlDatabase()
			},
			closeDeleteDatabase() {
				this.$refs.deleteDatabaseVisit.close()
			},
			selectCharset(e) {
				this.doSelectAllCollation(e.detail.value[0].text)
			},
			loadCharsets() {
				this.charsets = []
				this.collations = []

				selectAllCharset({
					id: this.id
				}).then(res => {
					this.charsets = res.data
				})
			},
			toTableInfo() {
				this.$refs.databaseOPVisit.close()
				uni.navigateTo({
					url: '/pages/database/mysql/databaseInfo?id=' + this.id + "&name=" + this.databaseNames[this
						.currentDatabase].name
				})
			},
			doSelectConnection() {
				selectConnection({
					id: this.id
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							text: '创建链接失败',
							icon: 'error'
						})
						return
					}

					if (this.databaseNames != '') {
						return
					}

					this.doSelectDatabaseNames()
				})
			},
			doSelectDatabaseNames() {
				selectDatabaseNames({
					id: this.id
				}).then(res => {
					this.databaseNames = res.data
				})
			},
			doSelectAllCollation(value) {
				selectAllCollation({
					id: this.id,
					charset: value
				}).then(res => {
					this.collations = res.data
				})
			},
			doAddMysqlDatabase() {
				addMysqlDatabase({
					id: this.id,
					name: this.addDatabaseInfo.name,
					charset: this.addDatabaseInfo.charset,
					collation: this.addDatabaseInfo.collation
				}).then(res => {
					uni.showToast({
						title: '增加成功',
						icon: 'success'
					})

					this.doSelectDatabaseNames()
				})
			},
			doDelMysqlDatabase() {
				delMysqlDatabase({
					id: this.id,
					name: this.databaseNames[this.currentDatabase].name
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					})

					this.doSelectDatabaseNames()
				})
			},
			doUpdateMysqlDatabase() {
				updateMysqlDatabase({
					id: this.id,
					name: this.updateDatabaseInfo.name,
					charset: this.updateDatabaseInfo.charset,
					collation: this.updateDatabaseInfo.collation
				}).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})

					this.doSelectDatabaseNames()
				})
			},
			doDelConnection() {
				delConnection({
					id: this.id
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						icon: "success"
					})
					
					uni.navigateTo({
						url: '/pages/index/index'
					})
				})
			}
		}
	}
</script>

<style>
	.button {
		margin: 30rpx;
		width: 40rpx;
		height: 25rpx;
		font-size: 5rpx;
	}

	.database-name-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95vw;
		margin-left: 10rpx
	}

	.option {
		font-size: 100rpx;
	}
</style>
